<template>
    <div>{{ props.tilte }}</div>
    <div>
        <a-form :model="formState">
            <a-form layout="inline">
                <a-form-item
                    label="指标名称"
                    style="margin-right: 2em"
                    v-bind="validateInfos.name"
                >
                    <a-input
                        v-model:value="formState.name"
                        style="width: 20em"
                    />
                </a-form-item>
                <a-form-item label="数据库" style="margin-right: 2em">
                    <a-select
                        v-model:value="formState.dbID"
                        :options="dbs"
                        style="width: 12em"
                    />
                </a-form-item>
                <a-form-item label="实时采集">
                    <a-checkbox
                        v-model:checked="formState.real"
                        style="transform: scale(1.5)"
                    />
                </a-form-item>
            </a-form>
            <a-form-item>
                <div>SQL:</div>
                <a-textarea
                    v-model:value="formState.sql"
                    :rows="4"
                    style="width: 44em"
                    placeholder="指标值转换为 IND &#10;实例：&#10;SELECT COUNT(1) AS IND FROM DUAL"
                />
                <a-button
                    type="primary"
                    style="margin-left: 1.2em"
                    @click="onSave"
                    >保存</a-button
                >
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup>
import { reactive, computed, toRaw, onMounted } from "vue"
import { message, Form } from "ant-design-vue"
import { useDataBaseStore } from "@/stores/dataBase"
import { RePortApi } from "@/api/js/reportApi"

const props = defineProps({
    tilte: {
        type: String,
        default: "单数据配置",
    },
    reportCode: String,
    indKey: String,
})

onMounted(() => {
    RePortApi.getSimpleInd(props.reportCode, props.indKey).then((res) => {
        if (res.status !== 200) {
            message.error(res.data)
            return
        }
        formState.name = res.data.name
        formState.dbID = res.data.dbID
        formState.sql = res.data.sql
        formState.real = res.data.real
    })
})

const dbStore = useDataBaseStore()

const useForm = Form.useForm
const formState = reactive({
    name: "",
    dbID: "",
    sql: "",
    real: false,
})

const rules = reactive({
    name: [
        {
            required: true,
            message: "指标名称不能为空",
            trigger: "change",
        },
    ],
})

const dbs = computed(() => dbStore.getItems())

const { validate, validateInfos } = useForm(formState, rules)

const onSave = () => {
    validate().then(() => {
        validate().then(() => {
            let data = toRaw(formState)
            let key = { id: props.reportCode, indId: props.indKey }
            data.key = key
            RePortApi.saveSimpleInd(data)
                .then((res) => {
                    if (res == "success") {
                        message.success("保存成功")
                    } else {
                        message.error(res)
                    }
                })
                .catch((err) => {
                    message.error(err)
                })
        })
    })
}
</script>

<style scoped></style>
